<template>
  <el-card class="failed">
    <div class="tips">{{ messages.tipFailed }}</div>
    <div class="input">
      <el-input v-model="apiUrl" size="mini"></el-input>
    </div>
    <div class="btns">
      <el-button size="mini" type="primary" icon="el-icon-refresh" @click.stop.prevent="reload">
        {{ messages.btnSave }}
      </el-button>
    </div>
  </el-card>
</template>

<script setup>
import {messages} from "../uses/useI18nMessage";
import {apiUrl, init} from '../uses/useInit'
import {bStorage} from '../api'

const emit = defineEmits(['url-set'])
const reload = () => {
  bStorage.setApiUrl(apiUrl.value);
  init(true);
  emit('url-set')
}
</script>
<style scoped lang="scss">
.failed {
  .tips {
    margin-bottom: 10px;
  }

  .input {
    margin-bottom: 10px;
  }
}
</style>
